<template>
  <div class="wrapper">
    <swiper :options="swiperOption" v-if="showSwiper">
        <swiper-slide v-for="item of list" :key="item.id" class="wrapper-img">
            <img :src="item.imgUrl"/>
        </swiper-slide>
        <div class="swiper-pagination" slot="pagination"></div>
    </swiper>
  </div>
</template>

<script>
import { Swiper, SwiperSlide } from 'vue-awesome-swiper'
export default {
    name: 'HomeSwiper',
    components: {
        Swiper,
        SwiperSlide
    },
    props: {
        list: Array
    },
    data () {
        return {
            swiperOption: {
                pagination: {
                el: '.swiper-pagination'
            },
            loop:true,
            autoplay:{
                delay: 2500,
                disableOnInteraction: false,
            }
          }
        }
    },
    /* 解决轮播图从第一张开始*/
    computed: {
        showSwiper() {
            return this.list.length
        }
    }
}
</script>

<style lang="stylus" scoped>
  .wrapper >>> .swiper-pagination-bullet-active
    width: 16px
    border-radius 8px
    background: #fff
  .wrapper
      width: 100%
      height: 0
      padding-bottom: 31.25%
      .wrapper-img
        width:100%
        height: 0
        padding-bottom: 31.25%
        img
          width:100%
          border-radius 10px 10px 0 0
</style>
